<template>
  <div>
    <a-row :gutter="24">
      <a-col
        :sm="24"
        :md="8"
        :xl="8"
        :style="{ marginBottom: '12px' }"
        v-show="this.gytbdshVisibile === 'true'"
      >
        <a-alert
          :message="this.gytbdshNum"
          description="各营填报待审核"
          type="warning"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/fight/zuzhiaudit', query: { noTitleKey: '0' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="8"
        :xl="8"
        :style="{ marginBottom: '12px' }"
        v-show="this.jgtbdshVisibile === 'true'"
      >
        <a-alert
          :message="this.jgtbdshNum"
          description="机关填报待审核"
          type="warning"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/fight/zuzhiaudit', query: { noTitleKey: '1' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="8"
        :xl="8"
        :style="{ marginBottom: '12px' }"
        v-show="this.jjktbdshVisibile === 'true'"
      >
        <a-alert
          :message="this.jjktbdshNum"
          description="纪检科填报待审核"
          type="warning"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/fight/zuzhiaudit', query: { noTitleKey: '2' }})}"
        />
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-show="this.xjjldshVisibile === 'true'"
      >
        <a-alert
          :message="this.xjjldshNum"
          description="休假记录待审核"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/vacation/declareaudit'})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-show="this.zhjldshVisibile === 'true'"
      >
        <a-alert
          :message="this.zhjldshNum"
          description="召回记录待审核"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/vacation/recallaudit'})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-if="welfareNum.separateWait !== 0"
        v-show="this.welfareVisible === 'true'">
        <a-alert
          :message="this.welfareNum.allWait"
          description="福利费申报待审核"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/welfare/audit', query: { noTitleKey: '0' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-else-if="welfareNum.educateWait !== 0"
        v-show="this.welfareVisible === 'true'">
        <a-alert
          :message="this.welfareNum.allWait"
          description="福利费申报待审核"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/welfare/audit', query: { noTitleKey: '1' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-else
        v-show="this.welfareVisible === 'true'">
        <a-alert
          :message="this.welfareNum.allWait"
          description="福利费申报待审核"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/welfare/audit', query: { noTitleKey: '2' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-if="welfareNum.separateStop !== 0"
        v-show="this.welfareVisible === 'true'">
        <a-alert
          :message="this.welfareNum.allStop"
          description="福利费需停发"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/welfare/audit', query: { noTitleKey: '0' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-else-if="welfareNum.educateStop !== 0"
        v-show="this.welfareVisible === 'true'">
        <a-alert
          :message="this.welfareNum.allStop"
          description="福利费需停发"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/welfare/audit', query: { noTitleKey: '1' }})}"
        />
      </a-col>
      <a-col
        :sm="24"
        :md="6"
        :xl="6"
        :style="{ marginBottom: '12px' }"
        v-else
        v-show="this.welfareVisible === 'true'">
        <a-alert
          :message="this.welfareNum.allStop"
          description="福利费需停发"
          type="info"
          show-icon
          close-text="[审核]"
          banner
          :after-close="() => {this.$router.push({path: '/welfare/audit', query: { noTitleKey: '2' }})}"
        />
      </a-col>
    </a-row>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '4px'}">
      <a-row :gutter="24" type="flex" :style="{ marginTop: '4px' }">
        <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
          <unit-tree @getUnit="handleUnitChange"></unit-tree>
        </a-col>
        <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
          <a-select default-value="全部" style="width: 100%" @change="handleTypeChange">
            <a-select-option value="全部">全部人员</a-select-option>
            <a-select-option value="军官">军官队伍</a-select-option>
            <a-select-option value="军士">军士队伍</a-select-option>
            <a-select-option value="兵">兵队伍</a-select-option>
          </a-select>
        </a-col>
        <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
          <a-select :default-value="years[0].name" style="width: 100%" @change="handleYearChange">
            <a-select-option v-for="year in years" :key="year.id">
              {{ year.name }}年
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
          <div style="background-color: #39eeff; border:1px solid #cbcaca; font-weight: bold; padding: 4px 0px 4px 10px">
            <a-icon type="fund" />&nbsp;&nbsp;{{ this.vacationRate }}
          </div>
        </a-col>
      </a-row>
      <div class="salesCard">
        <a-row :gutter="24" type="flex" :style="{ marginTop: '20px', paddingBottom: '20px' }">
          <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
            <div>
              <v-chart :force-fit="true" :height="405" :data="pieData1" :scale="pieScale">
                <v-tooltip :showTitle="false" dataKey="item*percent" />
                <v-axis />
                <!-- position="right" :offsetX="-140" -->
                <v-legend dataKey="item"/>
                <v-pie position="percent" color="item" :vStyle="pieStyle" />
                <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
              </v-chart>
            </div>
          </a-col>
          <a-col :xl="6" :lg="6" :md="6" :sm="24" :xs="24">
            <div>
              <v-chart :force-fit="true" :height="405" :data="pieData2" :scale="pieScale">
                <v-tooltip :showTitle="false" dataKey="item*percent" />
                <v-axis />
                <!-- position="right" :offsetX="-140" -->
                <v-legend dataKey="item"/>
                <v-pie position="percent" color="item" :vStyle="pieStyle" />
                <v-coord type="theta" :radius="0.75" :innerRadius="0.6" />
              </v-chart>
            </div>
          </a-col>
          <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
            <div>
              <v-chart
                height="405"
                :data="sourceData3"
                :scale="[{dataKey: 'x'}, {dataKey: 'y',alias: '人数'}]"
                :forceFit="true"
                :padding="['auto', 'auto', '40', '50']">
                <v-tooltip/>
                <v-axis :title="{text: ''}"/>
                <v-bar
                  position="x*y"
                  :label="['y', {htmlTemplate: text => {return text}}]"
                  color="type"/>
              </v-chart>
            </div>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
  import {
    ChartCard,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  } from '@/components'
  import { baseMixin } from '@/store/app-mixin'
  import {
    getGytbdsh, getJgtbdsh, getJjktbdsh,
    getXjjldsh, getZhjldsh, getFlfNum,
    getRate, getType, getPolitics, getRank
  } from '@/api/basic/pan'
  import UnitTree from '@/components/PersonSelect/UnitTree'
  const DataSet = require('@antv/data-set')
  export default {
    name: 'Pan',
    mixins: [baseMixin],
    components: {
      ChartCard,
      MiniProgress,
      RankList,
      Bar,
      Trend,
      NumberInfo,
      MiniSmoothArea,
      UnitTree
    },
    data () {
      return {
        numberDataStr: '',
        politicsDataStr: '',
        rankDataStr: '',
        years: [],
        unitId: null,
        personType: null,
        vacationYear: null,
        vacationRate: 0,
        numberData: [],
        politicsData: [],
        rankData: [],
        loading: true,
        gytbdshNum: 0,
        gytbdshVisibile: 'false',
        jgtbdshNum: 0,
        jgtbdshVisibile: 'false',
        jjktbdshNum: 0,
        jjktbdshVisibile: 'false',
        xjjldshNum: 0,
        xjjldshVisibile: 'false',
        zhjldshNum: 0,
        zhjldshVisibile: 'false',
        welfareVisible: 'false',
        welfareNum: 0,
        sourceData1: [],
        sourceData2: [],
        sourceData3: [],
        pieData1: [],
        pieData2: [],
        pieData3: [],
        pieScale: [{
          dataKey: 'percent',
          min: 0,
          formatter: '.0%'
        }],
        pieStyle: {
          stroke: '#fff',
          lineWidth: 1
        },
        typeMap: {
          '列兵': '兵',
          '上等兵': '兵',
          '下士': '军士',
          '中士': '军士',
          '上士': '军士',
          '四级军士长': '军士',
          '三级军士长': '军士',
          '二级军士长': '军士',
          '一级军士长': '军士',
          '少尉': '军官',
          '中尉': '军官',
          '上尉': '军官',
          '少校': '军官',
          '中校': '军官',
          '上校': '军官',
          '大校': '军官',
          '少将': '军官',
          '中将': '军官',
          '上将': '军官'
        }
      }
    },
    created () {
      // 年份选择器数据初始化
      const myDate = new Date()
      const startYear = myDate.getFullYear()
      const endYear = myDate.getFullYear() - 10
      for (let i = startYear; i > endYear; i--) {
        this.years.push(Object.assign({ id: i, name: i }))
      }
      this.handleDept()
      this.handleAll(this.unitId, this.personType, this.vacationYear)
      setTimeout(() => {
        this.loading = !this.loading
      }, 300)
    },
    methods: {
      handleUnitChange (value) {
        this.unitId = value
        this.handleAll(this.unitId, this.personType, this.vacationYear)
      },
      handleTypeChange (value) {
        if (value === '全部') {
          this.personType = null
        } else {
          this.personType = value
        }
        this.handleAll(this.unitId, this.personType, this.vacationYear)
      },
      handleYearChange (value) {
        this.vacationYear = value
        this.handleAll(this.unitId, this.personType, this.vacationYear)
      },
      // 7个方形模块在这里显示
      handleDept () {
        const _this = this
        getGytbdsh()
          .then(res => {
            if (res.message !== 'error') {
              _this.gytbdshVisibile = res.message
              _this.gytbdshNum = res.result
            } else {
              this.$message.error('操作失败！')
            }
          })
        getJgtbdsh()
          .then(res => {
            if (res.message !== 'error') {
              _this.jgtbdshVisibile = res.message
              _this.jgtbdshNum = res.result
            } else {
              this.$message.error('操作失败！')
            }
          })
        getJjktbdsh()
          .then(res => {
            if (res.message !== 'error') {
              _this.jjktbdshVisibile = res.message
              _this.jjktbdshNum = res.result
            } else {
              this.$message.error('操作失败！')
            }
          })
        getXjjldsh()
          .then(res => {
            if (res.message !== 'error') {
              _this.xjjldshVisibile = res.message
              _this.xjjldshNum = res.result
            } else {
              this.$message.error('操作失败！')
            }
          })
        getZhjldsh()
          .then(res => {
            if (res.message !== 'error') {
              _this.zhjldshVisibile = res.message
              _this.zhjldshNum = res.result
            } else {
              this.$message.error('操作失败！')
            }
          })
        getFlfNum()
          .then(res => {
            if (res.message !== 'error') {
              _this.welfareVisible = res.message
              _this.welfareNum = res.result
            } else {
              this.$message.error('操作失败！')
            }
          })
      },
      handleAll (unitId, personType, vacationYear) {
        const _this = this
        getRate({ 'unitId': unitId, 'personType': personType, 'vacationYear': vacationYear })
          .then(res => {
            if (res.message !== 'error') {
              if (res.result == null) {
                res.result = 0
              }
              _this.vacationRate = '休假率：' + res.result + '%'
            } else {
              this.$message.error('操作失败！')
            }
          })
        getType({ 'unitId': unitId })
          .then(res => {
            if (res.message !== 'error') {
              _this.numberData = res.result
              _this.sourceData1 = []
              if (_this.numberData !== null && _this.numberData.length > 0) {
                for (let i = 0; i < _this.numberData.length; i++) {
                  _this.sourceData1.push({ item: _this.numberData[i].x + ': ' + _this.numberData[i].y, count: _this.numberData[i].y })
                }
              }
              var dv = new DataSet.View().source(_this.sourceData1)
              dv.transform({
                type: 'percent',
                field: 'count',
                dimension: 'item',
                as: 'percent'
              })
              _this.pieData1 = dv.rows
            } else {
              this.$message.error('操作失败！')
            }
          })
        getPolitics({ 'unitId': unitId, 'personType': personType })
          .then(res => {
            if (res.message !== 'error') {
              _this.politicsData = res.result
              _this.sourceData2 = []
              if (_this.politicsData !== null && _this.politicsData.length > 0) {
                for (let i = 0; i < _this.politicsData.length; i++) {
                  _this.sourceData2.push({ item: _this.politicsData[i].x + ': ' + _this.politicsData[i].y, count: _this.politicsData[i].y })
                }
              }
              var dv = new DataSet.View().source(_this.sourceData2)
              dv.transform({
                type: 'percent',
                field: 'count',
                dimension: 'item',
                as: 'percent'
              })
              _this.pieData2 = dv.rows
            } else {
              this.$message.error('操作失败！')
            }
          })
        getRank({ 'unitId': unitId, 'personType': personType })
          .then(res => {
            if (res.message !== 'error') {
              _this.sourceData3 = res.result
              for (const i of _this.sourceData3) {
                i.type = _this.typeMap[i.x] === undefined ? '其他' : _this.typeMap[i.x]
              }
            } else {
              this.$message.error('操作失败！')
            }
          })
      }
    }
  }
</script>

<style lang="less" scoped>
  .extra-wrapper {
    line-height: 55px;
    padding-right: 24px;

    .extra-item {
      display: inline-block;
      margin-right: 24px;

      a {
        margin-left: 24px;
      }
    }
  }

  .antd-pro-pages-dashboard-analysis-twoColLayout {
    position: relative;
    display: flex;
    display: block;
    flex-flow: row wrap;
  }

  .antd-pro-pages-dashboard-analysis-salesCard {
    height: calc(100% - 24px);

    /deep/ .ant-card-head {
      position: relative;
    }
  }

  .dashboard-analysis-iconGroup {
    i {
      margin-left: 16px;
      color: rgba(0, 0, 0, .45);
      cursor: pointer;
      transition: color .32s;
      color: black;
    }
  }

  .analysis-salesTypeRadio {
    position: absolute;
    right: 54px;
    bottom: 12px;
  }

</style>
